﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer CMS - 后台管理系统</title> 
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css">    
	<style type="text/css">
    	.btns{display:flex;}
    	.btns>#ctlBtn{height:32px;margin-left:10px;}
    	.file-item{display:flex;align-items: center;height: 30px;font-size:12px;justify-content: space-between;}
    	.file-item .file-name,.file-item .file-state{margin:0;padding:0;}
    	.file-item .file-name{font-size:12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; width: 380px;}
    	.file-item .state{margin-left:50px;}
    	.file-item .close{cursor: pointer;}
    </style>
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">风格管理</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li class="active"><a href="#">风格管理</a></li>
        </ul>
        <!--breadcrumbs end -->
    </div>
</div>
<section class="panel">
    <div class="panel-body table-responsive" style="min-height: 800px;">
		<div class="row" style="margin-bottom:5px;">
			<div class="col-md-2 theme-box" th:each="item : ${themes}">
                <div class="theme-img">
                	<img th:src="${'/resources/' + system.uploaddir + '/' + item.themeImg}" />
                </div>
                <div class="theme-text" th:text="${item.themeName}" th:if="${item.status} eq '0'"></div>
                <div class="theme-text" th:if="${item.status} eq '1'">
                	<b th:text="${item.themeName} + '（当前主题）'"></b>
                </div>
                <div class="theme-text">
                	<div class="btn-group">
                    	<button data-toggle="dropdown" class="btn btn-primary btn-addon btn-sm dropdown-toggle"><i class="fa fa-cog"></i>主题设置 <span class="caret"></span></button>
						<ul class="dropdown-menu">
							<li shiro:hasAnyPermissions="system:theme:status">
								<a th:href="@{'/admin/theme/updateStatus?id=' + ${item.id} + '&status=1'}" th:if="${item.status} eq '0'">启用</a>
							</li>
							<li shiro:hasAnyPermissions="system:theme:update">
								<a href="javascript:void(0)" data-toggle="modal" th:themeid="${item.id}" th:onclick="javascript: reUploadLitpic(this.getAttribute('themeid'))">缩略图</a>
							</li>
							<li th:if="${item.themePath != 'default'}" shiro:hasAnyPermissions="system:theme:delete">
								<a href="javascript:void(0)" data-toggle="modal" th:themeid="${item.id}" th:onclick="javascript: confrimRemove(this.getAttribute('themeid'))">删除</a>
							</li>
						</ul>
					</div>
                </div>
            </div>
            <div class="col-md-2 theme-box" shiro:hasAnyPermissions="system:theme:add">
            	<a href="javascript:void(0)" data-toggle="modal" th:onclick="javascript: openUploadDialog()">
                    <div class="theme-img">
                    	<img src="/resource/img/theme-plus.png" data-toggle="modal"  />
                    </div>
                    <div class="theme-text" data-toggle="modal">上传主题包</div>
                </a>
            </div>
        </div>
    </div>
</section>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="upload-dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">操作提示？</h4>
            </div>
            <div class="modal-body">
            	<div class="alert alert-block alert-danger">
                    <strong>注意!</strong> 如果之前已经上传过同名的主题，则会覆盖，上传成功后切记点击确定按钮，否则不会保存！
                </div>
            	<form class="col s12" id="form1" th:action="@{/admin/theme/add}" method="post">
            		<input name="themePath" id="themePath" type="hidden" />
					<div id="uploader" class="wu-example">
					    <div class="btns">
					        <div id="picker">选择文件...</div>
					    </div>
					</div>
				</form>
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="save();">确定</button>
            </div>
        </div>
    </div>
</div>
    
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">操作提示？</h4>
            </div>
            <div class="modal-body">
				<h4 class="modal-title">您确定要删除该记录吗？</h4>
				<input type="hidden" id="cacheID" />
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
            	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
    
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="litpic-dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">重新上传缩略图</h4>
            </div>
            <div class="modal-body">
				<form class="col s12" id="form2" th:action="@{/admin/theme/update}" method="post">
            		<input type="hidden" name="id" id="uploadCacheID" />
            		<input type="hidden" name="themeImg" id="themeImg" />
					<div id="litpicUploader" class="wu-example">
						<div id="file-priview" class="file-priview"></div>
					    <div class="btns">
					        <div id="litpicPicker">选择文件...</div>
					    </div>
					</div>
				</form>
				
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="update();">确定</button>
            	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery 2.0.2 -->
<script src="/resource/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/resource/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="/resource/js/plugins/iCheck/icheck.min.js"></script>
<script src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
<script src="/resource/js/coco-message/coco-message.js"></script>
<script th:inline="javascript">
    function initUploader(picker,inputEl){
    	var uploader = WebUploader.create({
    		auto: true,
	        // swf文件路径
	        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
	        // 文件接收服务端。
	        server: '/upload/uploadFile',
	        // 选择文件的按钮。可选。
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        pick: '#' + picker,
	        fileNumLimit: 1,
	        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	        resize: false,
	        accept: {
                title: '',
                extensions: 'zip',
                mimeTypes: '.zip'
            }
	    });
    	uploader.on('fileQueued', function(file) {
    		
    	});
	    uploader.on('uploadSuccess', function(file, response) {
	    	$("#" + inputEl).val(response.data.filepath);
	    	uploader.reset();
			cocoMessage.success("上传成功");
	    });
	    uploader.on('uploadError', function( file ) {
			uploader.reset();
			cocoMessage.error("上传失败");
	    });
    }
    
    function initLitpicUploader(picker, el, inputEl){
    	var uploader = WebUploader.create({
    		auto: true,
	        // swf文件路径
	        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
	        // 文件接收服务端。
	        server: '/upload/uploadFile',
	        // 选择文件的按钮。可选。
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        pick: '#' + picker,
	        fileNumLimit: 1,
	        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	        resize: false,
	        accept: {
                title: '',
                extensions: 'jpg,png,jpeg,gif'
            }
	    });
    	uploader.on('fileQueued', function(file) {
    		$("#"+el).children().remove();
			$img = $("<img />");
    		uploader.makeThumb( file, function(error, src) {
    	        if (error) {
    	            $img.replaceWith('<span>不能预览</span>');
    	            return;
    	        }
    	        $img.attr( 'src', src );
    	    }, 100, 100);
	    	$("#"+el).append($img);
    	});
	    uploader.on('uploadSuccess', function(file, response) {
	    	$("#" + inputEl).val(response.data.filepath);
			uploader.reset();
	    	cocoMessage.success("上传成功");
	    });
	    uploader.on('uploadError', function( file ) {
			uploader.reset();
	    	cocoMessage.error("上传失败");
	    });
    }
    
    $(document).ready(function () {
    	$("#upload-dialog").on('shown.bs.modal',function(){
	    	initUploader("picker", "themePath");
		});
    	$("#litpic-dialog").on('shown.bs.modal',function(){
    		initLitpicUploader("litpicPicker", "file-priview", "themeImg");
		});
    });
    
	function openUploadDialog(){
		$("#upload-dialog").modal();
	}
	
	function save(){
		var themePath = $("#themePath").val();
		if(themePath == null || themePath == "" || themePath == "undefined"){
			cocoMessage.error("请先上传主题包");
			return;
		}
		$("#form1").submit();
	}
	
	//修改
	function update(){
		var cacheID = $("#uploadCacheID").val();
		if(cacheID == null || cacheID == "" || cacheID == "undefined"){
			cocoMessage.error("缺少必要的参数");
			return;
		}
		var themeImg = $("#themeImg").val();
		if(themeImg == null || themeImg == "" || themeImg == "undefined"){
			cocoMessage.error("请先上传缩略图");
			return;
		}
		$("#form2").submit();
	}
	
	function reUploadLitpic(id){
		$("#litpic-dialog").modal();
		$("#uploadCacheID").val(id);
	}
	
	function confrimRemove(id){
		$("#remove-dialog").modal();
		$("#cacheID").val(id);
	}
	
	function remove(){
		var currentID = $("#cacheID").val();
		window.location.href="/admin/theme/delete?id="+currentID;
		$("#remove-dialog").modal('hide');
	}
</script>
</body>
</html>
